import { watch, Ref } from 'vue';
import type { Cell, Column } from '../types';

export function useDataWatcher(
  props: {
    columns?: Column[];
    tableData?: Cell[][];
  },
  columns: Ref<Column[]>,
  tableData: Ref<Cell[][]>,
  emit: (event: 'update:columns' | 'update:tableData', data: Column[] | Cell[][]) => void
) {
  // 监听 props 变化并更新内部状态
  const watchProps = watch(
    () => props.columns,
    (newColumns) => {
      // 添加深度比较，避免相同数据的重复更新
      if (JSON.stringify(newColumns) !== JSON.stringify(columns.value)) {
        console.log('columns changed')
        columns.value = [...(newColumns || [])];
      }
    },
    { immediate: true }
  );

  const watchTableData = watch(
    () => props.tableData,
    (newTableData) => {
      // 添加深度比较，避免相同数据的重复更新
      if (JSON.stringify(newTableData) !== JSON.stringify(tableData.value)) {
        console.log('columns tableData')
        tableData.value = [...(newTableData || [])];
      }
    },
    { immediate: true }
  );

  // 在数据变化时触发更新事件
  const watchColumns = watch(
    columns,
    (newColumns, oldColumns) => {
      // 只有当数据真正改变时才 emit
      if (JSON.stringify(newColumns) !== JSON.stringify(oldColumns)) {
        console.log('columns changed222')
        emit('update:columns', newColumns);
      }
    },
    { deep: true }
  );

  const watchTableDataEmit = watch(
    tableData,
    (newTableData, oldTableData) => {
      // 只有当数据真正改变时才 emit
      if (JSON.stringify(newTableData) !== JSON.stringify(oldTableData)) {
        console.log('columns changed3333')
        emit('update:tableData', newTableData);
      }
    },
    { deep: true }
  );

  return {
    watchProps,
    watchTableData,
    watchColumns,
    watchTableDataEmit
  };
}
